<template>
  <div class="front_styl">
    <!-- 轮播图模块 -->
    <div class="front_banner">
      <div class="float_left">
        <Icons v-show="leftFloatShow" font="#icon-gb" class="icon-gb" fontSize="20px" @click.native="leftFloatShow = false"></Icons>
        <img v-show="leftFloatShow" class="img_left" src="~@/assets/images/float_left.png" alt="" srcset="" />
      </div>
      <!-- 轮播图 -->
      <FrontBanner ref="FrontBanner"></FrontBanner>
      <div class="float_right">
        <Icons font="#icon-gb" class="icon-gb" fontSize="20px" @click.native="rightFloatShow = false" v-show="rightFloatShow"></Icons>
        <img class="img_right" src="~@/assets/images/float_right.png" alt="" srcset="" v-show="rightFloatShow" />
      </div>
    </div>
    <div class="recommend_style">
      <!-- v-if="ProductListRecommend.length" -->
      <transition name="ease">
        <div class="big_box" v-if="ProductListRecommend.length">
          <div class="one_box son_box">
            <p class="top_title">Recommended products</p>
            <div class="logo_style">
              推荐产品
              <img src="../../assets/images/right_img.png" alt="" />
            </div>
            <p class="bootem_style">绿色化工平台</p>
          </div>
          <div class="father_box">
            <div class="li_list son_box" v-for="(item, index) in ProductListRecommend" :key="index" @click="toPageFun('/product/product-detail', item.id)">
              <div class="lift_box">
                <div class="hot_Logo">
                  <p class="hot_tet">推 荐</p>
                </div>
                <div class="hotgood_img">
                  <img src="../../assets/images/hotgood_img.png" alt />
                </div>
              </div>
              <div class="right_box">
                <div class="blue_box"></div>
                <p class="text_name">{{ item.name }}</p>
                <p class="text_price">挂牌价：点击查看挂牌价</p>
                <div class="btn_go">立即购买</div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div class="content_styl">
      <!-- 公司资讯+公告 -->
      <transition name="fade" appear>
        <div class="company_styl" v-if="true">
          <div class="left_news">
            <div class="title_styl">
              <div class="title_left">
                <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
                <div class="title_name">公司资讯</div>
                <div class="title_desc">开拓进取 高效务实 健康愉快</div>
              </div>
              <div class="title_right" @click="toPageFun('/news')">
                <div class="more_styl">更多</div>
                <Icons font="#icon-jt" class="icon-jt" fontSize="12px" @click.native="rightFloatShow = false" v-show="rightFloatShow"></Icons>
              </div>
            </div>
            <div class="news_content">
              <div class="news_imgs">
                <div class="imgs_first" @click="toPageFun('/news/news-detail', 120)">
                  <div class="img1_container">
                    <img class="img1" src="@/assets/images/goods_module1.png" alt="热烈祝贺振华石热烈祝贺振华石油设备第一批容器产化设备第一批容器产" />
                  </div>

                  <div class="img1_content">热烈祝贺振华石热烈祝贺振华石油设备第一批容器产化设备第一批容器产</div>
                </div>
                <div class="imgs_second" style="marginbottom: 18px">
                  <div class="imgs_left" @click="toPageFun('/news/news-detail', 120)">
                    <div class="img2_container">
                      <img class="img2" src="@/assets/images/goods_module1.png" alt="" />
                    </div>
                    <div class="img2_title">热烈祝贺振华石油设备第一批热烈祝贺振华石油设备第一批容器产品成功下线！！！容器产品成功下线！！！</div>
                  </div>
                  <div class="imgs_left" @click="toPageFun('/news/news-detail', 120)">
                    <div class="img2_container">
                      <img class="img2" src="@/assets/images/goods_module1.png" alt="" />
                    </div>
                    <div class="img2_title">热烈祝贺振华石油设备第一批容器产品成功下线！！！</div>
                  </div>
                </div>
                <div class="imgs_second">
                  <div class="imgs_left" @click="toPageFun('/news/news-detail', 120)">
                    <div class="img2_container">
                      <img class="img2" src="@/assets/images/goods_module1.png" alt="" />
                    </div>
                    <div class="img2_title">热烈祝贺振华石油设备第一批容器产品成功下线！！！</div>
                  </div>
                  <div class="imgs_left" @click="toPageFun('/news/news-detail', 120)">
                    <div class="img2_container">
                      <img class="img2" src="@/assets/images/goods_module1.png" alt="" />
                    </div>
                    <div class="img2_title">热烈祝贺振华石油设备第一批容器产品成功下线！！！</div>
                  </div>
                </div>
              </div>
              <div class="news_essay">
                <div class="essay_styl">
                  <div class="essay_bold">
                    <div class="block_styl"></div>
                    热烈祝贺振华石油设备第一批容器产品成功下线！！！
                  </div>
                  <div class="essay_font" v-for="(item, index) in 18" @click="toPageFun('/news/news-detail', 130)" :key="index">
                    <div class="block_styl"></div>
                    喜报！山东8家企业获评山东省创新型中小企业
                  </div>
                </div>
              </div>
            </div>
          </div>
          <QdNotice ref="QdNotice"></QdNotice>
        </div>
      </transition>
      <div ref="goodsModule">
        <transition name="ease">
          <!-- 商品模块 -->
          <div class="goods_styl" v-show="animate">
            <div class="title_styl">
              <div class="title_left">
                <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
                <div class="title_name">振华优选</div>
                <div class="title_desc">安全 环保 节能 创新</div>
              </div>
              <div class="title_right" @click="toPageFun('/product')">
                <div class="more_styl">更多</div>
                <Icons font="#icon-jt" class="icon-jt" fontSize="12px" @click.native="rightFloatShow = false" v-show="rightFloatShow"></Icons>
              </div>
            </div>
            <div class="goods_module" v-for="(item, index) in ProductClassifyList" :key="item.id">
              <div :class="index % 2 == 0 ? 'module1' : 'module1 module2'">
                <div class="goods_class">{{ item.classifyName }}</div>
                <div class="btn_all" @click="toPageFun('/product')">查看全部 +</div>
              </div>
              <div class="goods_right">
                <div class="goods_item" v-for="ele in item.ProductList || 0" :key="ele.id" @click="toPageFun('/product/product-detail', ele.id)">
                  <div class="goods_title">{{ ele.name }}</div>
                  <div class="goods_info">
                    <img class="goods_img" :src="ele.img && ele.img.length ? imagePreviewUrl + ele.img[0] : ''" alt="" srcset="" />
                    <div class="info_right">
                      <div>挂牌价: ******</div>
                      <div>单位: 元 / 吨</div>
                      <div>说明: 点击查看详情</div>
                      <div class="btn_styl">
                        <div class="btn_info">详情</div>
                        <div class="btn_buy">立即购买</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="goods_item" v-for="(item, index) in 6 - (item.ProductList.length || 0)" :key="index">
                  <QdNoData ref="QdNoData" widthImg="180px" heightImg="120px" marginTopImg="0" titleContent="暂无商品 ~"> </QdNoData>
                </div>
              </div>
            </div>
            <QdNoData v-if="!ProductClassifyList.length" ref="QdNoData" widthImg="300px" heightImg="200px" marginTopImg="0" titleContent="暂无商品 ~"></QdNoData>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import FrontBanner from "@/views/home/Front-Banner.vue";
import QdNotice from "@/components/common/Qd-Notice.vue";
import QdNoData from "@/components/common/Qd-NoData.vue";
import localData from "../../../localData";

export default {
  name: "front",
  components: { FrontBanner, QdNotice, QdNoData },
  data() {
    return {
      animate: false,
      leftFloatShow: true,
      rightFloatShow: true,
      companyList: [],
      ProductClassifyList: [], // 产品分类列表
      ProductListRecommend: [], // 产品推荐列表
      imagePreviewUrl: localData.API_URl + "/guns", // 图片预览地址
      Observe: null
    };
  },
  mounted() {
    this.getProductListClassify(); // 产品分类列表
    this.getProductListRecommend(); // 产品推荐列表
    this.elementObserveFun();
  },
  beforeDestroy() {
    if (this.Observe) {
      this.Observe.unobserve(this.$refs.goodsModule);
    }
  },
  methods: {
    // 产品分类列表
    getProductListClassify() {
      this.httpGet(this.API.API_categoryList)
        .then((res) => {
          res.data.forEach((item, index) => {
            this.$set(this.ProductClassifyList, [index], {
              ...item,
              ProductList: []
            });
            this.getProductList(item.classifyName, index);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 产品推荐列表
    getProductListRecommend() {
      this.httpGet(this.API.API_productList, { recommend: 1, shelves: 1 })
        .then((res) => {
          this.ProductListRecommend = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 产品列表
    getProductList(event, index) {
      this.httpGet(this.API.API_productList, {
        classifyName: event,
        shelves: 1
      })
        .then((res) => {
          let data = res.data.length > 6 ? res.data.slice(0, 6) : res.data;
          this.$set(this.ProductClassifyList[index], "ProductList", data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //去详情
    toPageFun(path, query) {
      if (path == "/product/product-detail" || path == "/news/news-detail") {
        this.$router.push({
          path,
          query: {
            id: query
          }
        });
        return;
      }
      this.$router.push(path);
    },
    elementObserveFun() {
      const tragetEle = this.$refs.goodsModule;
      const options = {
        root: null,
        rootMargin: "1px",
        threshold: [0, 0.25, 0.5, 0.75, 1]
      };
      this.Observe = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("进入视口");
            this.animate = true;
          } else {
            console.log("离开视口");
            this.animate = false;
          }
        });
      }, options);
      this.Observe.observe(tragetEle);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.front_styl {
  width: 100%;

  .front_banner {
    .flex-x(center);
    padding: 0 calc(~"(100% - 1185px)/2");
    background-color: #f6f8fb;

    .float_left {
      position: relative;
      margin-right: 20px;
      flex-shrink: 0;
      width: 105px;

      .icon-gb {
        position: absolute;
        z-index: 999;
        right: 3px;
        top: -25px;
        cursor: pointer;
      }

      .img_left {
        animation: imgAnimate 1s ease infinite alternate;
      }
    }

    .float_right {
      position: relative;
      margin-left: 20px;
      width: 105px;
      flex-shrink: 0;
      .img_right {
        animation: imgAnimate 1s ease infinite alternate;
      }

      .icon-gb {
        position: absolute;
        z-index: 999;
        right: 4px;
        top: -25px;
        cursor: pointer;
      }
    }

    @keyframes imgAnimate {
      from {
        transform: scale(0.9);
      }
      to {
        transform: scale(1);
      }
    }
  }

  // 滚动条
  .father_box::-webkit-scrollbar {
    height: 6px;
  }

  .father_box::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 10px; // 滑块圆角
  }

  //推荐产品
  .recommend_style {
    text-align: left;
    width: 100%;
    background-color: #f3f3f3;
    padding-top: 20px;

    .big_box {
      margin: 0;
      padding: 0;
      width: 1185px;
      margin: 0 auto;
      display: flex;
      gap: 10px;
      overflow: hidden;

      .son_box {
        flex-shrink: 0;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        list-style: none;
        height: 100px;
        width: 235px;
        margin-bottom: 5px;
      }

      .one_box {
        background: linear-gradient(270deg, #f86465 0%, #bf232b 100%);
        padding: 12px 26px 0;
        color: #ffffff;

        .top_title {
          font-size: 10px;
          text-align: start;
          margin-bottom: 5px;
        }

        .logo_style {
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          font-size: 16px;

          img {
            margin-left: 20px;
          }
        }

        .bootem_style {
          font-size: 12px;
          color: #fcacac;
          text-align: start;
        }
      }

      .father_box {
        flex: 1;
        display: flex;
        gap: 10px;
        overflow-x: auto;
      }

      .li_list {
        flex-shrink: 0;
        position: relative;
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        .lift_box {
          .hot_Logo {
            width: 58px;
            height: 62px;
            background: url("../../assets/images/hot_logo.png") no-repeat;

            .hot_tet {
              position: absolute;
              margin-top: 12px;
              margin-left: 5px;
              color: #ffffff;
              transform: rotate(-45deg);
            }
          }

          .hotgood_img {
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40.69px;
            height: 40px;
            border-radius: 50%;
            background: #eceae9;

            img {
              width: 18.89px;
              height: 19.05px;
            }
          }
        }

        .right_box {
          margin-right: 5px;

          .blue_box {
            margin-top: 5px;
            width: 31.54px;
            height: 8px;
            background: #347be5;
          }

          .text_name {
            font-size: 16px;
            color: #333333;
            margin-top: 5px;
          }

          .text_price {
            color: #347be5;
            font-size: 12px;
            margin-top: 5px;
          }

          .btn_go {
            margin-top: 5px;
            .solid-btn(81.39px, 21px, 2px, #008df3, #FFFFFF);
          }
        }
      }
    }
  }

  .content_styl {
    width: 100%;
    padding-bottom: 160px;
    background-color: #f3f3f3;

    .title_styl {
      .flex-x();

      .title_left {
        .flex-x(flex-start);

        .title_name {
          margin-left: 17px;
          font-size: 16px;
          font-weight: bold;
        }

        .title_desc {
          margin-left: 20px;
          font-size: 12px;
          color: #999999;
        }
      }

      .title_right {
        .flex-x();
        padding-right: 20px;
        cursor: pointer;

        .more_styl {
          color: #999999;
          margin-right: 6px;
          font-size: 12px;
        }
      }
    }

    .company_styl {
      .flex-x();
      width: 1185px;
      margin: 0 auto;
      padding-top: 18px;

      .left_news {
        width: 854px;
        height: 662px;
        padding-top: 16px;
        padding: 16px 10px 0 26px;
        background-color: #ffffff;

        .news_content {
          .flex-x();
          width: 100%;
          margin-top: 24px;

          .news_imgs {
            width: 402px;

            .imgs_first {
              position: relative;
              cursor: pointer;
              margin-bottom: 10px;
              .img1_container {
                width: 100%;
                height: 224px;
                overflow: hidden;
                .img1 {
                  width: 100%;
                  height: 224px;
                  transition: transform 0.2s ease-in-out;
                  &:hover {
                    transform: scale(1.2);
                  }
                }
              }

              .img1_content {
                position: absolute;
                bottom: 10px;
                width: 100%;
                height: 30px;
                padding: 0 6px;
                line-height: 30px;
                text-align: left;
                opacity: 1;
                font-size: 16px;
                color: #ffffff;
                background-color: rgba(50, 50, 50, 0.9);
                .one-ellipsis();
              }
            }

            .imgs_second {
              .flex-x();
              margin-bottom: 10px;
              .imgs_left {
                width: 196px;
                cursor: pointer;
                .img2_container {
                  width: 100%;
                  height: 112px;
                  overflow: hidden;
                  margin-bottom: 5px;
                  .img2 {
                    width: 100%;
                    height: 112px;
                    transition: transform 0.2s ease-in-out;
                    &:hover {
                      transform: scale(1.2);
                    }
                  }
                }

                .img2_title {
                  text-align: left;
                  font-size: 12px;
                  .more-ellipsis(2);
                }
              }
            }
          }

          .news_essay {
            width: 390px;
            height: 558px;
            overflow: hidden;
            overflow-y: auto;

            .essay_styl {
              text-align: left;
              font-size: 12px;

              .block_styl {
                width: 4px;
                height: 4px;
                margin-right: 10px;
                background-color: @themeColor;
              }

              .essay_bold {
                .flex-x(flex-start);
                position: relative;
                font-size: 16px;
                font-weight: bold;
                .one-ellipsis();
              }

              .essay_font {
                .flex-x(flex-start);
                position: relative;
                margin-top: 14px;
                .one-ellipsis();
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .goods_styl {
      width: 1185px;
      padding-top: 28px;
      margin: 16px auto 0 auto;
      background-color: #ffffff;

      .search_styl {
        height: 60px;
        margin: 0 18px 0 20px;
        margin-top: 28px;
        background: linear-gradient(180deg, #dceaff 0%, rgba(255, 255, 255, 0) 100%);
      }

      .goods_module {
        .flex-x();
        padding: 20px;

        .module1 {
          position: relative;
          width: 262px;
          height: 356px;
          background-image: url("~@/assets/images/goods_module1.png");

          .goods_class {
            position: absolute;
            left: 24px;
            top: 28px;
            font-size: 24px;
            font-weight: bold;
            color: #2d68cd;
          }

          .btn_all {
            .hollow-btn(68px, 20px, 4px, transparent, #2d68cd, #2d68cd);
            position: absolute;
            left: 24px;
            top: 75px;
            font-size: 12px;
          }
        }

        .module2 {
          background-image: url("~@/assets/images/goods_module2.png");

          .btn_all {
            .hollow-btn(68px, 20px, 4px, transparent, #b67f59, #b67f59);
            position: absolute;
            left: 24px;
            top: 75px;
            font-size: 12px;
          }

          .goods_class {
            color: #b67f59;
          }
        }

        .goods_right {
          .flex-x();
          flex-wrap: wrap;
          width: 886px;
          height: 356px;
          border-right: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;

          .goods_item {
            position: relative;
            width: 294px;
            height: 178px;
            border-top: 1px solid #e6e6e6;
            border-left: 1px solid #e6e6e6;
            cursor: pointer;

            .goods_title {
              padding: 14px 0 12px 0;
              border-bottom: 1px dashed #e6e6e6;
            }

            .goods_info {
              .flex-x(center);
              height: 130px;
              font-size: 12px;
              color: #666666;

              .goods_img {
                width: 80px;
                height: 68px;
                margin-right: 10px;
              }

              .info_right {
                text-align: left;

                .btn_styl {
                  .flex-x();
                  margin-top: 10px;

                  .btn_info {
                    margin-right: 4px;
                    .hollow-btn(56px,
                      24px,
                      100px,
                      #ffffff,
                      @themeColor,
                      @themeColor );
                  }

                  .btn_buy {
                    .solid-btn(80px, 24px, 100px, @themeColor, #ffffff);
                  }
                }
              }
            }
          }

          // hover样式
          .goods_item::before {
            position: absolute;
            content: "";
            border: 3px solid transparent;
            width: 0;
            height: 0;
            top: 0;
            left: 0;
          }

          .goods_item:hover::before {
            width: 100%;
            border-top-color: #008df3;
            transition: width 0.3s ease-out;
          }

          // end
        }
      }
    }
  }
}
</style>
